import React, { PureComponent } from 'react';
import { Table, Form, Button, Input, Icon, Modal } from 'antd';
import { connect } from 'dva';
import { worker } from "../../utils/worker"
class BridgeChildList extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            loading:false,
            roadlist: [],
            selectedRowKeys: []
        }
        this.onSelectChange = this.onSelectChange.bind(this)
        this.getData = this.getData.bind(this)
        this.editBridge = this.editBridge.bind(this)
        this.deleteBridge = this.deleteBridge.bind(this)
        this.queryBridge = this.queryBridge.bind(this)
        this.massDelete = this.massDelete.bind(this)
        this.toAddBridge = this.toAddBridge.bind(this)
    }
    onSelectChange = selectedRowKeys => {
        this.setState({ selectedRowKeys });
    };
    async componentDidMount() {
        const { current,loadProjectRoads } = this.props;
        let res = await loadProjectRoads({ projectId: current.id })
        this.setState({
            roadlist: res.res
        })
        this.getData()
    }
    toAddBridge(e) {
        e.persist();
        e.preventDefault()
        this.props.goInnerPage(null, 'addBridge', "新增桥梁", null)
    }
    async getData() {
        this.setState({
            loading:true
        })
        let { extra, dictlist, form,loadProjectBridges } = this.props;
        const name = form.getFieldValue("bridgeName")
        let res = await loadProjectBridges({ bridgeMainId: extra.bridgeMainId, name })
        if (res && res.length) {
            const len=res.length;
            for (let i = 0; i < len; i++) {
                let item = res[i];
                item.bridgeTypeText = await worker.getDictName(dictlist, item.bridgeType)
                item.loadStandardText = await worker.getDictName(dictlist, item.loadStandard)
            }
        }
        this.setState({
            data: res,
            loading:false
        })
    }
    editBridge(e, item) {
        e.persist();
        e.preventDefault()
        this.props.goInnerPage(null, 'editBridge', "桥梁:" + item.name, item)
    }
    deleteBridge(e, item, mass, ids) {
        e.preventDefault()
        const {deleteBridge,treeContext}=this.props;
        Modal.confirm({
            title: "提示",
            content: "是否删除此桥梁?",
            cancelText: "取消",
            okText: "确定",
            onOk:()=>{
                deleteBridge({ ids: mass ? ids : [item.id] }, async res => {
                    this.getData()
                    if (treeContext) {
                        if (res && res.bridgeMainIds && res.bridgeMainIds.length) {
                            const len=res.bridgeMainIds.length
                            for (let i = 0; i < len; i++) {
                                let item = res.bridgeMainIds[i];
                                treeContext.removeTreeNode('bridge' + item)
                            }
                        }
                        if (res && res.bridgeIds && res.bridgeIds.length) {
                            const len2=res.bridgeIds.length
                            for (let i = 0; i < len2; i++) {
                                let item = res.bridgeIds[i];
                                treeContext.removeTreeNode('bridgeChild' + item)
                            }
                        }


                    }
                }, err => {

                })
            },
            onCancel() {

            }
        })
    }
    queryBridge(e) {
        e.persist();
        e.preventDefault();
        this.getData()
    }
    massDelete(e) {
        const { selectedRowKeys } = this.state;
        this.deleteBridge(e, null, true, selectedRowKeys)
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        const { data, selectedRowKeys, roadlist ,loading} = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };

        const columns = [
            {
                title: '桥梁名称',
                dataIndex: 'name',
                key: 'name',
                ellipsis: true,
            },
            {
                title: '路线',
                dataIndex: 'roadlineId',
                key: 'roadlineId',
                ellipsis: true,
                render: text => roadlist.find(item => item.id == text).name
            },
            {
                title: '桥幅类型',
                dataIndex: 'leftOrRight',
                key: 'leftOrRight',
                ellipsis: true,
                render: text => text == 0 ? "左幅" : (text == 1 ? '右幅' : '单幅')
            },
            {
                title: '中心桩号',
                dataIndex: 'midStation',
                key: 'midStation',
                ellipsis: true,
            },
            {
                title: '桥梁类型',
                dataIndex: 'bridgeTypeText',
                key: 'bridgeTypeText',
                ellipsis: true,
            },
            {
                title: '桥宽(m)',
                dataIndex: 'width',
                key: 'width',
                ellipsis: true,
            },
            {
                title: '设计载荷',
                dataIndex: 'loadStandardText',
                key: 'loadStandardText',
                ellipsis: true,
            },
            {
                title: '设计基准期(年)',
                dataIndex: 'designReferencePeriod',
                key: 'designReferencePeriod',
                ellipsis: true,
            },
            {
                title: '操作',
                width: "160px",
                dataIndex: 'operate',
                key: 'operate',
                render: (text, record) => <span className="operate"><a onClick={(e) => this.editBridge(e, record)}><Icon type="edit" /><span>编辑</span></a> <a onClick={(e) => this.deleteBridge(e, record)}><Icon type="delete" /><span>删除</span></a></span>,
            },


        ];
        return (
            <div className="BridgeChildList">
                <div className="topNav">
                    <Form
                        style={{ marginTop: "20px",padding:"0",display:"flex",justifyContent:"flex-start" }}
                        labelCol={{ span: 8 }}

                        wrapperCol={{ span: 16 }}
                        labelAlign="right"
                    >
                        <Form.Item style={{ display:"flex" }} label='桥梁名称'>
                            {getFieldDecorator('bridgeName', {
                                rules: [

                                ]
                            })(
                                <Input allowClear style={{ width: "160px" }} placeholder="请输入桥梁名称" />
                            )}
                        </Form.Item>
                        <Button  onClick={this.queryBridge} style={{ display:"flex",alignItems:"center", margin: "3px 0 0 20px" }} type="primary">查询</Button>
                    </Form>
                    <div>
                        <Button onClick={this.toAddBridge} icon="plus" type="primary">新增桥梁</Button>
                        <Button disabled={!selectedRowKeys.length} onClick={this.massDelete} icon="delete" type="primary">删除桥梁</Button>
                    </div>
                </div>
                <div>
                    <Table loading={loading} scroll={{ y: 360 }} rowKey={record => record.id} pagination={false} rowSelection={rowSelection} dataSource={data} columns={columns} />
                </div>
            </div>
        )
    }
}
export default connect(
    ({ project: { current }, dict: { dictlist } }) => ({ current, dictlist }),
    dispatch => ({
        loadProjectBridges: (values) => dispatch({
            type: 'bridge/loadProjectBridges',
            payload: values
        }),
        loadProjectRoads: (values) => dispatch({
            type: 'refRoads/loadProjectRoads',
            payload: values
        }),
        deleteBridge: (values, onSuccess, onError) => dispatch({
            type: 'bridge/deleteBridge',
            payload: {
                values,
                onSuccess,
                onError
            }
        }),
    })
)(Form.create('BridgeChildList', {

})(BridgeChildList));